<!doctype html>
<html lang="en" ng-app="demo">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Hello</title>
        <link rel="stylesheet" href="css/pure-min.css" />
        <style type="text/css">
            .action-delete{
                margin-left: 3px;
            }
        </style>
    </head>
    <body ng-controller="HomeController">
        <div class="pure-g">
            <div class=" pure-u-1-2">
                <h1>Add a Person</h1>
                <form class="pure-form pure-form-aligned" method="post" ng-submit="addPerson()">
                    <fieldset>
                        <div class="pure-control-group">
                            <label for="name">Username</label>
                            <input id="name" type="text" ng-model="person.name" name="name" placeholder="Name" />
                        </div>
                        <div class="pure-control-group">
                            <label for="email">Email</label>
                            <input id="email" type="email" ng-model="person.email" name="email" placeholder="Email" />
                        </div>
                        <div class="pure-control-group">
                            <label for="tel">Phone</label>
                            <input id="tel" type="tel" ng-model="person.phone" name="phone" placeholder="Phone" />
                        </div>
                        <div class="pure-control-group">
                            <label for="role">Role</label>
                            <select name="role" id="role" ng-model="person.role">
                                <option ng-repeat="r in roles" value="{{r.name}}">{{r.label}}</option>
                            </select>
                        </div>
                        <div class="pure-controls">
                            <label class="pure-radio"><input type="radio" name="gender" value="male" ng-model="person.gender"/>Male</label>
                            <label><input type="radio" name="gender" value="femail"  ng-model="person.gender" />Female</label>
                        </div>
                        <div class="pure-controls">
                            <label ng-repeat="s in skill" class="pure-checkbox">
                                <input type="checkbox" name="skill" value="{{s.name}}" />{{s.label}}
                            </label>
                        </div>
                        <div class="pure-controls">
                            <button type="submit" class="pure-button pure-button-primary">Save</button>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="pure-u-1-2">
                <h1>People List</h1>
                <table class="pure-table  pure-table-bordered">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" ng-click="checkAll()" />
                            </th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Gender</th>
                            <th>Skill</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="p in people track by $index">
                            <td>
                                <input type="checkbox" value="" />
                            </td>
                            <td>{{p.name}}</td>
                            <td>{{p.phone}}</td>
                            <td>{{p.email}}</td>
                            <td>{{p.role}}</td>
                            <td>{{p.gender}}</td>
                            <td>{{p.skill}}</td>
                            <td><a href="#" ng-click="editPerson(p.id)" class="pure-button">E</a><a ng-click="removePerson(p.id)" href="#" class="pure-button action-delete">X</a> </td>     
                        </tr>
                    </tbody>
                </table>
            </div>
            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
            <script type="text/javascript" src="js/angular.js"></script>
            <script type="text/javascript" src="js/angular-animate.min.js"></script>
            <script type="text/javascript" src="js/angular-resource.min.js"></script>
            <script type="text/javascript" src="js/angular-route.min.js"></script>
            <script type="text/javascript">
                angular.module('demo', []).controller('HomeController', HomeController);
                function HomeController($scope) {
                    $scope.people = JSON.parse(localStorage.getItem('people')) || {};
                    $scope.roles = [{label: 'admin', name: 'admin'}, {label: 'normal', name: 'normal'}];
                    $scope.skill = [{label: 'Python', name: 'python'}, {label: 'PHP', name: 'php'}, {label: 'Java', name: 'java'}];
                    $scope.person = {id: (new Date()).getTime(), name: '', email: '', phone: '', role: ''};
                    $scope.addPerson = function () {
                        /*
                         if ($scope.addPersonForm.$valid){
                         }
                         */
                        $scope.people[$scope.person.id] = $scope.person;
                        localStorage.setItem('people', JSON.stringify($scope.people));
                        console.log($scope.person);
                        $scope.person = {id: (new Date()).getTime(), };
                    };

                    $scope.checkAll = function () {

                    };

                    $scope.editPerson = function (id) {
                        $scope.person = $scope.people[id];
                    };
                    $scope.removePerson = function (id) {
                        delete $scope.people[id];
                        localStorage.setItem('people', JSON.stringify($scope.people));
                    };
                }
            </script>
    </body>
</html>